import React from 'react'
import propTypes from 'prop-types'
import { TabBar } from 'antd-mobile'
import {useNavigate} from 'react-router-dom'

Footbar.propTypes={
  tabs:propTypes.array
}
export default  function Footbar(props) {
   const tabs=props.tabs
     
     const nav=useNavigate()
     const setRouteActive=(key)=>{
          nav("/main/"+key,{replace:true})
     }
        return (
            <div >
                <TabBar style={{backgroundColor:'white'}} 
                onChange={(key)=>{setRouteActive(key)}}
                defaultActiveKey={tabs[0].hidden?tabs[1].key:tabs[0].key}
                >
                   {
                     tabs.map((item)=>{
                      if(item.hidden){
                        return ''
                      } 
                      return (
                      <TabBar.Item 
                        key={item.key}  
                        icon={(active)=>{ 
                           return <img src={!active?require(`./images/${item.icon}.png`).default:require(`./images/${item.icon}-selected.png`).default} style={{width:'22px'}} alt=""></img>
                        }}  
                        title={item.title}>
                      </TabBar.Item>
                      )
                      
                     })
                   }
                </TabBar>
            </div>
        )
}
